<!-- 导出块设备信息 -->
<template>
  <div>
    <a-modal
      :title="$t('Export')"
      v-model="exportVisible"
      width='35%'
      @ok='handleExport'
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
    <!-- @change="onChangeReport" -->
      <!-- 数据统计报表 -->
      <div class="data-export-box">
        <a-checkbox v-model="reportChecked">
          {{$store.state.language=='zh'? '数据统计报表': 'Data statistics report'}}
        </a-checkbox>
      </div>
      <!-- 各存储池的详细块设备信息 -->
      <div>
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
          {{$store.state.language=='zh'? '各存储池的详细块设备信息': 'Detailed block device information of each storage pool'}}
        </a-checkbox>
      </div>
      <div class="checkbox-group-box">
        <a-checkbox-group v-model="blockCheckedList" :options="poolList" @change="onChangePool" />
      </div>
      <template slot="footer">
        <a-button @click="handleReset">
          {{$t('Reset')}}
        </a-button>
        <a-button type="primary" @click="handleExport">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export default {
  name: "ExportReport",
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      exportVisible: false,
      reportChecked: false,
      poolList: [
        { label: 'a', value: '1' },
        { label: 'b', value: '2' },
        { label: 'c', value: '3' },
        { label: 'd', value: '4' },
        { label: 'e', value: '5' },
        { label: 'f', value: '6' },
      ],
      blockCheckedList: [],
      indeterminate: false,
      checkAll: false,
    }
  },

  watch: {
    visible(newValue) {
      this.exportVisible = newValue;
    }
  },

  methods: {
    //导出
    handleExport() {
      // this.reportChecked
      // this.blockCheckedList


    },
    exportToExcel() {
      // 创建一个新的工作簿
      const workbook = new ExcelJS.Workbook();

      // 添加一个工作表
      const worksheet = workbook.addWorksheet('Sheet1');

      // 设置工作表的列标题
      worksheet.columns = [
        { header: '名字', key: 'name',},
        { header: '年龄', key: 'age',},
        { header: '城市', key: 'city',}
      ];

      // 添加数据行
      const data = [
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Alice', age: 25, city: 'London' },
        { name: 'Bob', age: 35, city: 'Paris' }
      ];

      data.forEach(row => {
        worksheet.addRow(row);
      });

      // 将工作簿保存为二进制数据
      workbook.xlsx.writeBuffer().then(buffer => {
        // 将二进制数据转换为Blob对象
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        // 使用FileSaver.js保存Blob对象为Excel文件
        saveAs(blob, 'data.xlsx');
      });
    },

    //关闭导出弹窗
    handleCancel() {
      this.$emit('closeExport');
      this.handleReset();
    },

    //改变数据统计报表的选择
    onChangeReport(e) {
      this.reportChecked = e.target.checked;
    },

    //单选导出的存储池块设备信息
    onChangePool(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.poolList.length;
      this.checkAll = checkedList.length === this.poolList.length;
    },

    //全选按钮处理
    onCheckAllChange(e) {
      Object.assign(this, {
        blockCheckedList: e.target.checked ? this.handleCheckAllBox(this.poolList) : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    //将对象数组poolList，处理成value数组
    handleCheckAllBox(list) {
      let checkedList = [];
      list.forEach(item => {
        checkedList.push(item.value);
      });
      return checkedList;
    },

    //重置选择
    handleReset() {
      this.reportChecked = false;
      this.blockCheckedList = [];
      this.indeterminate = false;
      this.checkAll = false;
    },
  },
}
</script>
<style scoped>
  .data-export-box {
    margin-bottom: 20px;
  }
  ::v-deep.ant-checkbox-group > .ant-checkbox-group-item {
    display: block;
    margin: 8px 0;
  }
  .checkbox-group-box {
    height: 160px;
    margin-top: 5px;
    padding: 0 0 0 26px;
    background-color: var(--mainGreyColor);
    overflow: auto;
  }
</style>